<div class="page-heading">
            		<h1><i class="fa fa-users"></i> Manteniment usuaris</h1>
            	</div>
		<div class="row">
				
					<div class="col-md-12">
						<div class="widget">
							
							<div class="widget-content">	
							<div class="data-table-toolbar">
									<div class="row">
										<div class="col-md-4">
											<form role="form">
											<input type="text" placeholder="Buscar..." class="form-control">
											</form>
										</div>
										<div class="col-md-8">
											<div class="toolbar-btn-action">
												<a class="btn btn-success"><i class="fa fa-file-excel-o "></i> Exportar a Excel</a>
											</div>
										</div>
									</div>
								</div>				
								<div class="table-responsive">
									<table data-sortable class="table">
										<thead>
											<tr>
												<th>Id</th>
												<th>Nom/Cognoms</th>
												<th>Usuari</th>
												<th>E-mail</th>
												<th>Perfil usuari</th>
												<th data-sortable="true">Creat</th>
												<th>Estat</th>
												<th data-sortable="false">Editar</th>
											</tr>
										</thead>
										<tbody id="listado_usuarios"></tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="modal fade" id="editar_usuario" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				  <div class="modal-dialog">
				    <div class="modal-content">
				      <div class="modal-header">
				      
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				        <h4 class="modal-title" id="myModalLabel">Editar usuari</h4>
				      </div>
				      <div class="modal-body">
				        	<form role="form" class="form-horizontal" id="form_editar_usuario"></form>
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-default" data-dismiss="modal">Tancar</button>
				        <button type="button" class="btn btn-primary" onclick="javascript:updateUsuario();">Guardar canvis</button>
				      </div>
				    </div>
				  </div>
				</div>
		
	
	<script>


	$(function () {

		var select_perfil = new String();
		var edit_id_usuario;
		
		initPage();

	      
	});


	function initPage(){
		getPerfilesUsuario();
		initTabla();
	}

	function initTabla(){
		$.ajax({
	        type: "get",
		    url: url_base+"lista-usuarios-gestion",
		        success: function(data){
			       var usuarios = jQuery.parseJSON(data);
	
			       $("#listado_usuarios").empty();
			       $.each(usuarios, function (key, value) {
			    	   $("#listado_usuarios").append(listarUsuario(value));
					});
		        }
		    });
	}

	/*
	* Genera una linea por usuario
	*/
	function listarUsuario(obj){

		var estat;

		if(obj.activo == '1'){ estat = '<span class="label label-success">Actiu</span>';}
		if(obj.activo == '0'){ estat = '<span class="label label-danger">Inactiu</span>'; }
		
		var linea = '<tr>'+
					'<td>'+obj.id+'</td>'+
					'<td><strong>'+obj.nom+'</strong></td>'+
					'<td>'+obj.usuario+'</td>'+
					'<td>'+obj.email+'</td>'+
					'<td>'+obj.perfil+'</a></td>'+
					'<td>'+obj.creado+'</td>'+
					'<td>'+estat+'</td>'+
					'<td><div class="btn-group btn-group-xs">'+
					'<a data-toggle="tooltip" title="Editar" class="btn btn-default" onclick="javascript:editarUsuario('+obj.id+');"><i class="fa fa-edit"></i></a>'+
					'<a data-toggle="tooltip" title="Eliminar" class="btn btn-danger" onclick="javascript:eliminarUsuario('+obj.id+');"><i class="fa fa-trash"></i></a>'+
					'</div>'+
					'</td>'+
					'</tr>';
		return linea;
	}

	/*
	* Opciones que aparecen en un modal para editar el usuario
	*/
	function editarUsuario(id){
		
		$.ajax({
	        type: "post",
	        data:{id:id},
		    url: url_base+"info-usuario-id-json",
		        success: function(data){
		        	var usuario = jQuery.parseJSON(data); 
		        	$('#editar_usuario').modal('show');

		        	$("#form_editar_usuario").html(setInfoUsrModal(usuario));//a�ade los inputs con los valores del usuario al modal
		        	$('#edit_perfil_usuario option[value='+usuario.perfil_usuario+']').prop('selected', 'selected').change();//cambia el select al perfil de usuario actual
		        	if(usuario.activo == true){ $('#edit_activo').prop('checked', true); } // si el usuario esta activo marcamos el checkbox
		        	edit_id_usuario = usuario.id;
		        }
		    });
	}

	
	/*
	* Una vez abierto el modal, añadimos la informacion del usuario
	*/
	function setInfoUsrModal(aux){
				
		var string = '<div class="form-group">'+
						'<label class="col-sm-2 control-label" for="input-text">Nom/Cognoms</label>'+
						'<div class="col-sm-10">'+
						 '<input type="text"  id="edit_nom" value="'+aux.nom+'" class="form-control">'+
						'</div>'+
					  '</div>'+
					  '<div class="form-group">'+
						'<label class="col-sm-2 control-label" >Usuari</label>'+
						'<div class="col-sm-10">'+
						  '<input type="text"  id="edit_usuari" value="'+aux.usuario+'" class="form-control">'+
						'</div>'+
					  '</div>'+
					  '<div class="form-group">'+
						'<label class="col-sm-2 control-label" >Usuari</label>'+
						'<div class="col-sm-10">'+
						  '<input type="email" id="edit_email" value="'+aux.email+'" class="form-control">'+
						'</div>'+
					  '</div>'+
					  '<div class="form-group">'+
						'<label class="col-sm-2 control-label" for="input-text">Password</label>'+
						'<div class="col-sm-5">'+
						  '<input type="password"  placeholder="********" value="null" id="edit_pass" class="form-control">'+
						  '<p class="help-block">Nova clau</span>'+
						'</div>'+
						'<div class="col-sm-5">'+
						  '<input type="password" placeholder="********" value="null" id="edit_pass2" class="form-control">'+
						  '<p class="help-block">Repetir clau</span>'+
						'</div>'+
					  '</div>'+
					  '<div class="form-group">'+
						'<label class="col-sm-2 control-label" >Perfil Usuari</label>'+
						'<div class="col-sm-10">'+select_perfil+'</div>'+
					  '</div>'+
					  '<div class="form-group">'+
						'<label class="col-sm-2 control-label" for="input-text">Intents Erronis</label>'+
						'<div class="col-sm-2">'+
						  '<input type="text" value="'+aux.intentos_fallidos+'" id="edit_intentos_fallidos" class="form-control">'+
						'</div>'+
					  '</div>'+
					  '<div class="form-group">'+
						'<label class="col-sm-2 control-label" for="input-text">Actiu</label>'+
						'<div class="col-sm-2">'+
						  '<input type="checkbox" class="form-control" id="edit_activo" style="height:10px; width:20px;" >'+
						'</div>'+
					  '</div>'
						;
			return string;	
	}

	/*
	* Carga los perfiles que tienen los usuarios
	*/
	function getPerfilesUsuario(){
		
		$.get(url_base+"listado-perfiles-usuario", function( data ) {
			var perfiles = jQuery.parseJSON(data); 
			select_perfil= '<select class="form-control" id="edit_perfil_usuario">';

			$.each(perfiles, function (key, value) {
				select_perfil+='<option value="'+value.cod_perfil+'">'+value.perfil+'</option>';
			});
			
			select_perfil+='</select>';
		});

	}

	/*
	*
	*/
	function updateUsuario(){

		var data = {};
		data.edit_id_usuario = edit_id_usuario;
		data.edit_nom = $("#edit_nom").val();
		data.edit_usuario = $("#edit_usuari").val();
		data.edit_email = $("#edit_email").val();
		data.edit_pass = $("#edit_pass").val();
		data.edit_perfil_usuario = $("#edit_perfil_usuario").val();
		data.edit_intentos_fallidos = $("#edit_intentos_fallidos").val();
		data.edit_activo = $("#edit_activo").is(':checked');
		
		if(validarFormEditarUsuario(data)){
			$.ajax({
		        type: "post",
		        data:{info:data},
			    url: url_base+"update-usuario",
			        success: function(data){
			        	if(data){
			        		msgOk("Usuario modificado correctamente");
				        }else{
						msgError("ERROR AL MODIFICAR L\'USUARI");
					    }
			        	$('#editar_usuario').modal('hide');
			        	initPage();
			        }
			    });
		}

		
	}


	/*
	* Realiza las comprobaciones de los campos del formulario en el modal de edicion de usuario
	*/
	function validarFormEditarUsuario(data){

		if(!stringEsValido(data.edit_nom)){ msgError("Nom/Cognoms no vàlid"); return false;}
		if(!stringEsValido(data.edit_usuario)){ msgError("Usuari no vàlid"); return false;}
		if(!comprobarEmail(data.edit_email)){msgError("E-mail no vàlid"); return false;}
		if(!stringEsValido(data.edit_pass)){ msgError("Clau1 no vàlida"); return false;	}
		if(!stringEsValido(data.edit_pass2)){ msgError("Clau2 no vàlida"); return false;}
		if(data.edit_pass != $("#edit_pass2").val()){ msgError("La contrasenya no coincideix"); return false;}
		if(!stringEsValido(data.edit_intentos_fallidos)){ msgError("Intentos fallidos erroneo"); return false;}
		return true;
	}
	
	
	function eliminarUsuario(id_usuario){
		alert(id_usuario);
	}
</script>	